<template>
	<view class="container">
		<view class="content-list" v-if="contentList.length">
			<view class="list" v-for="(item , index) in contentList" :key="index" @click="listDetails(index)">
				<view class="image">
					<u--image :src="item.cover_img"></u--image>
				</view>
				<view class="title">{{ item.title }}</view>
				<view class="content">{{ item.content }}</view>
			</view>
		</view>
		<view v-else class="box-u-empty">
			<u-empty mode="data" textSize="35" iconSize="120" iconColor="#c00000" textColor="#c00000" text="无数据"></u-empty>
		</view>
	</view>
</template>

<script>
	import { articleList } from '@/api/getList.js';
	export default {
		data() {
			return {
				Id: "",
				contentList: []
			}
		},
		created() {
			const item = uni.getStorageSync("item");
			const data = item;
			this.$set(this,'Id',data.Id);
			this.getContentList();
		},
		methods: {
			async getContentList(){
				const { data } = await articleList({ value: "" });
				this.contentList = data.filter(item => Number(item.author_id) === Number(this.Id) && Number(item.state) === 1);
				this.contentList.reverse();
			},
			listDetails(index){
				const item = this.contentList[index];
				uni.setStorageSync("item",item);
				uni.navigateTo({ url: `/pages/content/contentDetails?item=${JSON.stringify(item)}` });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		box-sizing: border-box;
		.box-u-empty {
			min-height: calc(100vh);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.box-u-swiper{
		margin-bottom: 20rpx;
	}
	.box-sort {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
		margin: 0 20rpx;
		justify-content: center;
		border-radius: 8rpx;
		.li-list {
			width: 100rpx;
			height: 100rpx;
			margin: 0 15rpx 20rpx 18rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
	}
	.content-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		.list {
			width: calc(50% - 10rpx);
			height: 440rpx;
			text-align: center;
			margin: 10rpx 0;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			.image {
				width: 100%;
				display: flex;
				justify-content: center;
				padding-top: 20rpx;
				image {
					width: 100% !important;
				}
			}
			.title {
				padding: 20rpx 30rpx;
				font-size: 36rpx;
				font-weight: 900;
				box-sizing: border-box;
				height: 80rpx;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			.content {
				box-sizing: border-box;
				padding: 0 20rpx;
				font-size: 26rpx;
				color: #999;
				display: -webkit-box;           /* 使用弹性盒子布局 */
				-webkit-box-orient: vertical;  /* 垂直排列 */
				-webkit-line-clamp: 2;         /* 限制显示的行数为3行 */
				overflow: hidden;               /* 隐藏超出部分 */
				text-overflow: ellipsis;       /* 使用省略号表示被隐藏的文本 */
				max-height: 4.5em;             /* 根据行高设置最大高度，3行 + 1行的间距 */
				line-height: 1.5em;            /* 行高 */
			}
		}
	}
</style>
